<template>
    <section>
        <canvas ref="cav" class="border"></canvas>
    </section>
</template>

<script>
    import {getRandomColor} from "@/utils/tools";

    /**
     *@Description:画小球
     *@author ZY
     *@date 2022/11/20 21:38
     */
    export default {
        name: "canvas-ball",
        data() {
            return {}
        },
        mounted() {
            this.main()
        },
        methods: {
            main() {
                let that = this
                // 画弹性小球
                let ballCanvas = this.$refs.cav
                ballCanvas.height = 430
                ballCanvas.width = 600
                let ww = ballCanvas.width
                let wh = ballCanvas.height
                let ballCtx = ballCanvas.getContext('2d')
                this.drawBoomBall(ballCtx)
            },

            /**
             * @Description: 弹性小球
             * @author ZY
             * @date 2022/11/20 16:53
             * @param {Object} ctx canvas 对象
             */
            drawBoomBall(ctx) {
                let w = 600
                let h = 430
                let ballArr = []

                //定义小球
                class Ball {
                    /**
                     * @Description:
                     * @author ZY
                     * @date 2022/11/20 16:34
                     * @param {Number} x 中心X坐标
                     * @param {Number} y 中心Y坐标
                     * @param {Number} xv X轴加速度
                     * @param {Number} yv Y轴加速度
                     * @param {Number} r  半径
                     * @param {String} color 颜色
                     * @return {Object} 返回值描述
                     */
                    constructor(x, y, xv, yv, r, color) {
                        this.x = x
                        this.y = y
                        this.xv = xv
                        this.yv = yv
                        this.r = r
                        this.color = color
                    };

                    //移动
                    move() {
                        //临界反弹 改变加速度方向
                        if (this.x + this.r > w || this.x - this.r < 0) {
                            this.xv *= -1
                        }
                        if (this.y + this.r > h || this.y - this.r < 0) {
                            this.yv *= -1
                        }
                        this.x += this.xv;
                        this.y += this.yv;
                        //判断两球是否相交
                        // for (let i = 0; i < ballArr.length; i++) {
                        //     if (this !== ballArr[i]) {
                        //         let dx = this.x - ballArr[i].x;
                        //         let dy = this.y - ballArr[i].y;
                        //         let distance = Math.sqrt(dx * dx + dy * dy);
                        //         if (this.r + ballArr[i].r >= distance) {
                        //             ballArr.splice(i, 1)
                        //         }
                        //
                        //     }
                        // }

                    }

                    // 绘制小球
                    draw() {
                        ctx.clearRect(0, 0, w, h)
                        ctx.beginPath()
                        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
                        ctx.closePath()
                        ctx.fillStyle = this.color
                        ctx.fill()
                    }
                }

                setInterval(function () {
                    ctx.clearRect(0, 0, w, h)
                    for (let i = 0; i < 28; i++) {
                        const ball = new Ball(
                            Math.random() * (w - 40) + 40,
                            Math.random() * (h - 40) + 40,
                            Math.random() * 15 * (Math.round(Math.random()) * 2 - 1),
                            Math.random() * 20 * (Math.round(Math.random()) * 2 - 1),
                            Math.random() * 20,
                            getRandomColor())
                        ballArr.push(ball)
                        ballArr[i].draw()
                        ballArr[i].move()
                    }
                }, 10)

            },
        }
    }
</script>

<style lang="scss" scoped>
    .border {
        border: 1px solid #dbdbdb;
        border-radius: 5px;
        overflow: hidden;
    }
</style>
